<%--
  Created by IntelliJ IDEA.
  User: 李东阳
  Date: 2021/12/7
  Time: 13:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>影视分析平台</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/index_css.css">
    <link rel="stylesheet" type="text/css" href="css/verify.css">

    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/verify.js"></script>
<body>


<%--vue包裹--%>
<div id="app">


    <%--   注册 模态框--%>
    <div class="modal fade modalIndex" id="adminModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title" id="myModalLabel">欢迎体验分析的魅力！！</h1>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-10">
                                <input v-model="userName_re" type="text" class="form-control" name="userName"
                                       id="firstname" placeholder="请输入名字">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="pwd" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input v-model="pwd_re" type="password" class="form-control" id="pwd"
                                       placeholder="请输入密码">
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">请记住我
                                    </label>
                                </div>
                            </div>
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" @click="register">注册</button>
                </div>
            </div>
        </div>
    </div>
    <%--    注册模态框结束--%>


    <%--    登录错误模态框--%>
    <div class="modal fade" id="loginErrorModal" tabindex="-1" role="dialog" aria-labelledby="loginErrorModal"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="loginErrorModal1">登录失败！！！</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body alert alert-danger">
                    登录失败，请重新输入账号密码
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

                </div>
            </div>
        </div>
    </div>
    <%--    登录错误模态框结束--%>

    <%--    图片滑动验证模态框--%>
    <div class="modal fade" id="imgslider" tabindex="-1" role="dialog" aria-labelledby="imgslider1" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="imgslider1">请将白色方块滑动到指定位置</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="huadongyanzheng" class="modal-body alert " style="margin: 0 auto">

                </div>

            </div>
        </div>
    </div>
    <%--    图片滑动验证模态框--%>


    <%--登录界面--%>
    <div class="app_bg">

        <div class="container">
            <div class="row main">
                <div class="col-lg-6 main_left"><img src="img/index_main_left.jpg" alt="背景图片" class="img-fluid rounded">
                </div>
                <div class="col-lg-6 main_right">

                    <button class="btn btn-primary topright">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor"
                             class="bi bi-arrow-right-square" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                  d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4.5 5.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
                        </svg>
                    </button>

                    <div class="main_right_main" style="padding-top: 20px;padding-left: 50px">
                        <div class="main_right_main_top"><h1 style="font-size: 60px">Login</h1></div>
                        <div class="main_right_main_bottom">
                            <div style="margin-top: 100px ">
                                <form>
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">UserName</label>
                                        <input type="text" class="form-control" id="exampleInputEmail1" name="uName"
                                               aria-describedby="emailHelp" v-model="userName">
                                        <small id="emailHelp" class="form-text text-muted">We'll never share your pwd
                                            with anyone else.</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1"
                                               name="uPwd" v-model="pwd">
                                    </div>
                                    <div class="form-group form-check">
                                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                        <label class="form-check-label" for="exampleCheck1">Check me out</label>
                                    </div>
                                    <button type="button" class="btn btn-primary login_button" @click="login">登录
                                    </button>

                                </form>
                            </div>
                        </div>
                        {{userName}}
                        {{pwd}}
                        <div class="main_right_main_bottom_bo" data-toggle="modal" data-target="#adminModal"
                             style="margin-top: 100px"><a href="#">没有登录？请先登录</a></div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <%--    登录界面结束--%>


</div>
<%--vue包裹结束--%>

<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                userName: "",
                pwd: "",
                userName_re: "",
                pwd_re: ""
            }
        },
        methods: {
            register() {
                alert(this.pwd_re)
            },

            login() {

                this.modifysli()
                return axios.post('${pageContext.request.contextPath}/user/login', {
                    "uName": this.userName,
                    "uPwd": this.pwd
                }).then(function (response) {
                    if ("no" == response.data) {
                        alert("账号密码错误，请重新输入")
                        $('#loginErrorModal').modal(focus)
                    } else {

                        alert("登录成功？" + response.data)
                        localStorage.setItem("user", response.data)
                        $('#imgslider').modal(focus)

                    }


                }).catch(function () {

                })


            },
            modifysli() {
                let un = this.userName
                $('#huadongyanzheng').slideVerify({
                    type: 2,		//类型
                    vOffset: 5,	//误差量，根据需求自行调整
                    vSpace: 5,	//间隔
                    imgName: ['img/touxiang/u003.jpg', 'img/touxiang/u002.jpg'],
                    imgSize: {
                        width: '400px',
                        height: '500px',
                    },
                    blockSize: {
                        width: '40px',
                        height: '40px',
                    },
                    barSize: {
                        width: '400px',
                        height: '40px',
                    },
                    ready: function () {
                    },
                    success: function () {

                        alert("验证成功，欢迎你" + " " + " " + un)
                        window.location.href = "main.jsp"
                        //......后续操作
                    },
                    error: function () {
                        //		        	alert('验证失败！');
                    }

                })
            }
        }

    })
</script>
<%--<script>--%>
<%--    $('#huadongyanzheng').slideVerify({--%>
<%--        type : 2,		//类型--%>
<%--        vOffset : 5,	//误差量，根据需求自行调整--%>
<%--        vSpace : 5,	//间隔--%>
<%--        imgName : ['img/touxiang/u003.jpg', 'img/touxiang/u002.jpg'],--%>
<%--        imgSize : {--%>
<%--            width: '400px',--%>
<%--            height: '500px',--%>
<%--        },--%>
<%--        blockSize : {--%>
<%--            width: '40px',--%>
<%--            height: '40px',--%>
<%--        },--%>
<%--        barSize : {--%>
<%--            width : '400px',--%>
<%--            height : '40px',--%>
<%--        },--%>
<%--        ready : function() {--%>
<%--        },--%>
<%--        success : function() {--%>
<%--            alert('验证成功,欢迎你'+this.)--%>
<%--            window.location.href="main.jsp"--%>
<%--            //......后续操作--%>
<%--        },--%>
<%--        error : function() {--%>
<%--            //		        	alert('验证失败！');--%>
<%--        }--%>

<%--    });--%>
<%--</script>--%>
</body>
</html>
